<template>
<!-- 供方加扣款结算---列表 -->
  <div class="e-table">
     <div class="top">
      <div class="left"  style="margin-left: 10px;">
        <div>
        <el-button size="mini" @click="buttonAdd()" style="background: #7aa818; color: #fff">新增</el-button>

        </div>
         <div
          style="padding-left: 10px; cursor: pointer"
          @click="batchOperation"
        >
          <img src="@/assets/piliang.png" />
          <span style="padding-left: 8px">{{ batch }}</span>
        </div>
      </div>
      <div class="right">
        <div>
          <el-input placeholder="" v-model="searchIpt" size="small">
            <i slot="suffix" class="el-icon-search like"></i>
          </el-input>
        </div>
         <div>
          <el-button size="small" style="background: #2e61d7; color: #fff"

            >高级搜索</el-button
          >
        </div>
      </div>
    </div>

      <el-table
        border
        ref="table"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        @cell-mouse-enter="cellMouseEnter"
        @cell-mouse-leave="cellMouseLeave"

      >
       <el-table-column type="selection" width="50" v-if="isBatch" fixed>
      </el-table-column>
         <el-table-column show-overflow-tooltip label="操作" fixed width="100px">
                     <template slot-scope="scope">
                    <div>
                        <i
                            class="el-icon-edit"
                            style="cursor: pointer; font-size: 20px"
                            :class="{
                                'icon-edit-active-color': MouseEnterId == scope.row.billId
                            }"
                            @click="tableDbEdit(scope.row.billId)"
                        ></i>
                    </div>
                </template>
             </el-table-column>
        <el-table-column label="加扣款编号" min-width="300" fixed show-overflow-tooltip>
          <template slot-scope="scope">
            <span @click="Examine(scope.row.billId)" style="color:blue; cursor: pointer;">
             {{scope.row.billNo}}
          </span>

          </template>
        </el-table-column>
        <el-table-column
          prop="settlementDate"
          label="加扣款日期"
          width="150"

        >
        </el-table-column>
         <el-table-column
          prop="orgName"
          label="机构"
          min-width="250"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="settlementUnitName"
          label="结算单位"
          min-width="250"
          show-overflow-tooltip
        >
        </el-table-column>
         <el-table-column
          prop="contractName"
          label="合同名称"
          width="150"
        >
        </el-table-column>
         <!-- <el-table-column
          prop="acceptanceQuantity"
          label="合同类型"
          width="150"
        >
        </el-table-column> -->
         <el-table-column
          prop="plusDeductionAmount"
          label="加扣款金额（元）"
          width="150"
        >
         </el-table-column>
          <el-table-column
          prop="returnDepositAmount"
          label="返还保证金金额（元）"
          width="200"
        >
        </el-table-column>
        <el-table-column
          prop="evaluate"
          label="评价"
          width="150"
        >
        </el-table-column>
          <el-table-column
          prop="state"
          label="状态"
          width="150"
          show-overflow-tooltip
        >
        <template slot-scope="scope">
           <span>{{['草稿','审核中','已审核','已关闭','已作废'][scope.row.state]}}</span>
        </template>
         </el-table-column>
      </el-table>

      <ComPagination />

    <!-- 弹窗 -->
     <!-- <el-dialog
            title="高级搜索"
            :visible.sync="dialogVisibleSearch"
            width="650px"
            :modal="false"
            :modal-append-to-body="false"
            custom-class="searchDialog"
        >
            <div >
                <el-form  label-width="100px">
                    <el-form-item label="主营范围：">
                        <el-input
                            v-model="input1"
                            placeholder="请输入内容"
                            size="mini"
                        >
                        <i slot="suffix" class="el-input__icon el-icon-document-copy"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="计划日期：">
                        <div style="display:flex">
                            <el-date-picker v-model="value1" size="mini" style="flex:1"> </el-date-picker>
                            <span class="separate">—</span>
                            <el-date-picker arrow-control v-model="value2" size="mini"  style="flex:1">
                            </el-date-picker>
                        </div>
                    </el-form-item>
                    <el-form-item label="状态：">
                         <el-select v-model="value1" size="mini" placeholder="请选择活动区域" :clearable="false" :popper-append-to-body="false" style="width:100%;line-height:30px">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
             </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" style="background: #7aa818; color: #fff"
                    >重置</el-button
                >
                <el-button size="mini" style="background: #2e61d7; color: #fff"
                    >确定</el-button
                >
            </span>
        </el-dialog> -->
  </div>
</template>
<script>
import ComPagination from '@/components/pagination/pagination.vue'

export default {
    components: {
        ComPagination,
    },
    data () {
        return {
            isBatch: false, //是否进入批量操作
            batch: '进入批量管理',
            dialogVisibleSearch: false,
            searchIpt: '',
            input1: '',
            value1: '',
            value2: '',
            multipleSelection: [],
            tableData: [
                {
                    billNo: '', //加扣款编号
                    settlementDate: '', //加扣款日期
                    orgName: '', //机构
                    settlementUnitName: '', //结算单位
                    contractName: '', //合同名称
                    plusDeductionAmount: '', //加扣款金额（元
                    returnDepositAmount: '', //返还保证金金额
                    evaluate: '', //评价
                    state: '', //状态
                },
            ],
            MouseEnterId: 0,
        }
    },
    created () {
        this.getData()
    },
    mounted () {},
    methods: {
        //批量管理
        batchOperation () {
            this.isBatch = !this.isBatch
            if (this.isBatch) {
                this.batch = '退出批量管理'
                this.$refs.table.clearSelection()
            } else {
                this.batch = '进入批量管理'
            }
        },
        cellMouseEnter (row) {
            this.MouseEnterId = row.billId
        },
        cellMouseLeave () {
            this.MouseEnterId = 0
        },
        handleSelectionChange (val) {
            this.multipleSelection = val
            console.log(this.multipleSelection)
        },

        getData () {
            this.$Ajax
                .httpPost({
                    url: '/materialsettle/supplierPlusDeductionSettlement/listByEntity',
                    params: {
                        // number: '',
                        limit: 10,
                        page: 1,
                        // orgname: '',
                        // states: []
                    },
                })
                .then(res => {
                    this.tableData = res.list
                })
        },
        //新增按钮
        buttonAdd () {
            this.$router.push('/supplierAddDeductionsCloseAdd')
        },

        //编辑
        tableDbEdit (billId) {

            this.$router.push({
                path: '/supplierAddDeductionsCloseEdit',
                query: { billId }
            })
        },
        //详情
        Examine (billId) {
            this.$router.push({
                path: '/supplierAddDeductionsCloseDetails',
                query: { billId }
            })
        },
        //搜索
        // search () {
        //     this.$Ajax
        //         .httpPost({
        //             url: '/outer/subcontractor/listByEntity',
        //             params: {
        //                 keyword: this.searchIpt,
        //                 limit: 10,
        //                 page: 1,
        //             },
        //         })
        //         .then(res => {
        //             this.tableData = res.list
        //         })
        // },

    },
}
</script>
<style lang="scss" scoped>
.like {
  color: rgb(46, 97, 215);
  font-size: 17px;
  line-height: 30px;
  cursor: pointer;
}
::v-deep.el-table .cell {
  text-align: center;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 6px; // 横向滚动条
  height: 10px; // 纵向滚动条
}
// 滚动条的滑块
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 5px;
}
</style>